<template>
  <div id="content">
    <van-row v-show="fail_reason && rent_userId == userId && status == 2">
      <van-col
        style="background-color: #fff; color: red; padding: 0 16px"
        span="24"
        >审核不通过原因：{{ fail_reason }}</van-col
      >
    </van-row>
    <van-row style="background-color: #fff; padding: 15px 0">
      <van-col span="24" style="text-align: center">
        <span class="detail_title">{{ title }}</span>
      </van-col>
    </van-row>
    <van-row>
      <van-field label="行业分类：">
        <span slot="input">{{ getChosedClass(in_class) }}</span>
      </van-field>
      <van-field label="所在地区：">
        <span slot="input">{{ address }}</span>
      </van-field>
      <!-- <van-field>
        <span slot="label"
          >数<span style="visibility: hidden">占坑</span>量：</span
        >
        <span slot="input">{{ num }}</span>
      </van-field> -->
      <van-field label="是否包邮：">
        <span slot="input">{{ is_pinkage_text[is_pinkage] }}</span>
      </van-field>
      <van-field>
        <span slot="label"
          >押<span style="visibility: hidden">占坑</span>金：</span
        >
        <span slot="input" style="color: red"
          >￥{{ deposit == 0 || deposit == null ? '面议' : deposit }}</span
        >
      </van-field>
      <van-field>
        <span slot="label"
          >租<span style="visibility: hidden">占坑</span>金：</span
        >
        <span slot="input" style="color: red"
          >{{ price == 0 || price == null ? '面议' : price
          }}{{ price == 0 || price == null ? '' : getChosedUnit(unit) }}</span
        >
      </van-field>
      <van-field label="新旧程度：">
        <span slot="input">{{
          new_level != -1 ? getChosedLevel(new_level) : '不明'
        }}</span>
      </van-field>

      <div
        style="
          height: 150px;
          padding: 10px;
          text-align: center;
          backgroundcolor: white;
          display: flex;
          justify-content: center;
        "
        v-if="false"
      >
        <vue-qr
          :logoSrc="avatar"
          :margin="5"
          :logoMargin="1"
          :text="qr_url"
          :size="500"
          style="width: 130px; margin-left: 25px"
        ></vue-qr>
        <ul
          style="
            display: flex;
            flex-direction: column;
            flex: 1;
            padding-left: 10px;
            color: #f55318;
            font-size: 15px;
            font-weight: bolder;
          "
        >
          <li style="flex: 1; display: flex; align-items: center">
            长按识别二维码
          </li>
          <li style="flex: 1; display: flex; align-items: center">
            手机号登录
          </li>
          <li style="flex: 1; display: flex; align-items: center">
            了解更多涂装行业信息
          </li>
        </ul>
      </div>
      <van-row style="background-color: #fff; margin: 10px 0">
        <van-col span="24" style="padding: 0 5%">
          <p
            class="detailTitle"
            style="font-size: 11px; color: #ee4b15; margin-top: 14px"
          >
            <!-- <span
            style="margin-top:5%;display:inline-block;width:3vh;height:3vh;background:#EE4B15;color:#ffffff;text-align:center;font-weight:blod;border-radius:30px;"
          >！
          </span> &nbsp;&nbsp;&nbsp; -->
          </p>
          <p
            class="detailtext"
            style="font-size: 11px; margin-top: 5px; color: #ee4b15"
          >
            喷喷涂涂提示:
            此信息由喷喷涂涂用户发布，联系时要辨别信息真假谨防上当受骗。
          </p>
        </van-col>
      </van-row>

      <!-- <van-row
        style="
          background-color: #fff;
          margin-top: 7px;
          padding-top: 20;
          padding-bottom: 10px;
        "
      >
        <van-col span="24" style="text-align: center">
          <span class="detail_title">详细介绍</span>
        </van-col>
      </van-row> -->
      <!-- <van-row style="background-color: #fff">
        <van-col span="24">
          <div
            style="
              margin: 10px 16px;
              border: 1px solid #ebedf0;
              background-color: #fff;
              padding: 10px 16px;
            "
          >
            {{ detail ? detail : '暂无详细介绍' }}
          </div>
        </van-col>
      </van-row>-->
      <van-row
        style="background-color: #fff; padding: 4px 0 8px 0"
        v-show="fail_reason && status == 3 && userLevel == 2"
      >
        <van-col span="24" style="text-align: center">
          <span class="detail_title">审核结果</span>
        </van-col>
      </van-row>
      <van-row
        style="background-color: #fff"
        v-show="fail_reason && status == 3 && userLevel == 2"
      >
        <van-col span="24">
          <div
            v-html="fail_reason"
            style="
              margin: 10px 16px;
              border: 1px solid #ebedf0;
              background-color: #fff;
              padding: 10px 16px;
            "
          ></div>
        </van-col>
      </van-row>
    </van-row>
    <!-- <van-row style="background-color: #fff">
      <van-col style="width: 90%; margin: auto; float: none">
        <img
          style="width: 100%; height: 100%"
          :src="image"
          v-for="(image, index) in images.slice(0, 1)"
          :key="index"
        />
      </van-col>
    </van-row> -->
    <!-- <van-row
      style="background-color: #fff; margin-top: 20px; padding: 20px 0 8px 0"
      v-if="list.length != 0"
    >
      <van-col span="24" style="text-align: center">
        <span class="detail_title">更多推荐</span>
      </van-col>
    </van-row>
    <van-list
      class="more_recommend"
      v-model="loading"
      :finished="finished"
      :finished-text="list.length > 0 ? '没有更多了' : ''"
      @load="onLoad"
      style="padding: 0"
    >
      <div
        v-for="(item, index) in list"
        :key="index"
        :title="item"
        style="background-color: #fff; padding: 0px 10px"
      >
        <van-row
          style="padding-top: 15px"
          :style="index != 0 ? 'margin-top: 15px' : null"
          @click="itemClick(item.id)"
        >
          <van-col>
            <img :src="getSrc(item)" width="100px" height="100px" />
          </van-col>
          <van-col
            style="
              height: 100px;
              width: calc(100% - 100px);
              padding-left: 10px;
              display: flex;
              flex-direction: column;
            "
          >
            <div style="flex: 1; display: flex">
              <p
                style="
                  display: flex;
                  display: inline-block;
                  color: white;
                  width: auto;
                  height: 20px;
                  padding: 2px 3px;
                  align-items: center;
                  font-size: 12px;
                  text-align: center;
                  border-radius: 4px;
                  margin-top: 5px;
                "
                :style="{
                  background:
                    item.userType == '平台'
                      ? '#86d1a4'
                      : item.userType == '门店'
                      ? '#809de1'
                      : item.userType == '个人'
                      ? '#f4a97c'
                      : null,
                }"
              >
                {{ item.userType == undefined ? '待审' : item.userType }}
              </p>
              <van-cell
                style="width: 80%; margin-left: 10px; margin-top: 2px"
                :title="item.title"
                label-class="item"
                title-class="title"
              ></van-cell>
            </div>
            <div style="width: 100%">
              <van-row type="flex" align="bottom" style="margin-bottom: 4px">
                <span
                  style="
                    border: 1px solid #fe815a;
                    border-radius: 4px;
                    color: #fe815a;
                    padding: 2px;
                    font-size: 10px;
                  "
                >
                  出租
                </span>
                <span
                  style="color: red; margin-left: 5px"
                  :style="
                    item.price == 0 || item.price == null
                      ? 'font-size:12px;'
                      : ''
                  "
                  >￥{{
                    item.price == 0 || item.price == null ? '面议' : item.price
                  }}</span
                >
              </van-row>
              <van-row
                type="flex"
                align="center"
                justify="space-between"
                style="height: 16px"
              >
                <van-col style="display: flex; align-items: center">
                  <van-icon name="location-o" />
                  <span class="cell-span" style="margin-left: 3px">{{
                    getAddressByDistrictCode(item.areaCode) || '未知'
                  }}</span>
                </van-col>
                <van-col style="font-size: 12px">
                  <div style="height: 100%">
                    <span
                      class="cell-span"
                      style="float: left; line-height: 12px"
                    >
                      <van-icon
                        name="star"
                        color="#EE3F00"
                        style="float: left; font-size: 12px"
                        v-show="
                          item.newLevel >= 0 && item.newLevel < 3 ? true : false
                        "
                      ></van-icon>
                      &#8197;{{ getChosedLevel(item.newLevel) }}
                    </span>
                  </div>
                </van-col>
                <van-col>
                  <span class="cell-span">{{
                    item.updateTime.substring(0, 10)
                  }}</span>
                </van-col>
              </van-row>
            </div>
          </van-col>
        </van-row>
        <van-row
          style="
            height: 40px;
            line-height: 33px;
            display: flex;
            margin-top: 10px;
          "
        >
          <div
            class="addrDetail"
            style="border-right: 1px solid #e8e8e8"
            @click="callphone(item)"
          >
            <img :src="mendianTel" style="height: 60%" />
            <div class="mendianlbel">电话联系</div>
          </div>
          <div class="addrDetail" v-if="item.shopId == null"></div>
          <div
            class="addrDetail"
            @click="itemShopClick(item)"
            v-if="item.shopId != null"
          >
            <img :src="mendian" style="height: 60%" />
            <div class="mendianlbel">进入门店</div>
          </div>
        </van-row>
        <div style="width: 100%; background: #f0f1f4" v-show="userId != -1" />
      </div>
    </van-list> -->
    <van-row>
      <div
        v-if="shouwAd"
        ref="advertising"
        style="width: 100%; position: fixed; bottom: 41px; padding: 0 0"
      >
        <!-- <img
          :src="qrurl"
          alt=""
          style="
            width: 11%;
            position: absolute;
            z-index: 11;
            height: 100%;
            margin-left: 10px;
          "
        /> -->

        <img :src="botm" alt="" style="width: 100%" />
      </div>
      <!-- <div
        style="
          width: 100%;
          position: fixed;
          bottom: 11%;
          padding: 0 5%;
          height: 45px;
        "
        v-if="shouwAd"
      >
        <img src="" alt="" style="width: 100%; height: 100%" ref="pictures" />
      </div> -->
      <van-col
        style="
          width: 10%;
          height: 2rem;
          position: fixed;
          bottom: 3.3rem;
          right: 2%;
          text-align: center;
        "
        @click="shouwAd = false"
        v-if="shouwAd"
      >
      </van-col>
      <van-col span="24" style="position: fixed; bottom: 0">
        <van-button
          style="
            background-color: #ee3f00;
            color: #fff;
            width: 100%;
            font-size: 16px;
          "
          @click="showTel"
          >{{ telText }}</van-button
        >
      </van-col>
    </van-row>
  </div>
</template>
<script>
import {
  Row,
  Col,
  Field,
  Image,
  List,
  Popup,
  Toast,
  Divider,
  Dialog,
} from 'vant';
import {
  morelistRent,
  rentDetail,
  dicItems,
  authInfo,
  userInfo,
  updateDuration,
  cardInfo,
  isAllowedShowTel,
  getOrderSign,
  craqd,
  gethomebuton,
} from '@/api/api';
import mendianTel from '@/assets/images/info/mendianTel.png';
import mendian from '@/assets/images/info/mendian.png';
import { setLocalStorage, getLocalStorage } from '@/utils/local-storage';
import logo_default from '@/assets/images/logo.jpg';
import areaList from '@/views/user/module-address-edit/area_all.json';
import wx from 'weixin-js-sdk';
import vueQr from 'vue-qr';
export default {
  name: 'rent-detail',
  props: {
    rentId: [String, Number],
  },
  data() {
    return {
      setou: new Map(),
      shouwAd: true,
      botm: '',
      qrurl: '',
      mendianTel,
      mendian,
      isOut: false,
      userId: Number(getLocalStorage('userId').userId),
      telText: '查看联系方式',
      title: '',
      new_level: -1,
      in_class: -1,
      price: 0,
      deposit: 0,
      unit: 1,
      is_pinkage: 0,
      is_pinkage_text: ['包邮', '到付'],
      classoptions: [],
      leveloptions: [],
      unitoptions: [],
      num: 0,
      detail: '',
      images: [],
      list: [],
      areaList: areaList,
      area_code: '',
      address: '',
      finished: true,
      loading: false,
      tel: '',
      mobile: '',
      classId: 'USED.PUBLISH.CLASS',
      newLevelId: 'USED.PUBLISH.NEW.LEVEL',
      unitId: 'RENT.UNIT',
      fail_reason: '',
      rent_userId: '',
      userId: '',
      status: -1,
      userStatus: 0,
      isAttention: 0,
      userLevel: 0,
      directorId: '',
      director_phone: '',
      queryParam: {
        page: 0,
        limit: 4,
        areaCode: '',
        inClass: -1,
        newLevel: -1,
        viewMore: 0,
        rentId: -1,
        sort: 'update_time',
        order: 'desc',
      },
      memberLevel: 0,
      avatar:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/loecx309uoghxz7yp0hq.png',
      qr_url: '',
      isManager: false,
      //四大板块查看权限
      powerPRSWLevle: 0,
    };
  },
  beforeRouteLeave(to, from, next) {
    // 仅适用于本页面不作为H5着陆页的情况
    updateDuration({ goodsId: this.rentId, url: this.link }).then((res) => {});
    next();
  },
  created() {
    gethomebuton({
      userId: Number(getLocalStorage('userId').userId),
      mode: 22,
    }).then((res) => {
      this.botm = res.data.data[0].image;
    });
    craqd({ userId: Number(getLocalStorage('userId').userId) }).then((res) => {
      this.qrurl = res.data.data;
    });
    this.initClassOption();
    this.initNewLevelOption();
    this.initUnitOption();
    this.init();
    dicItems({
      groupId: 'RENT_USER_TYPE',
    }).then((res) => {
      res.data.data.list.forEach((e) => {
        this.setou.set(e.itemValue, e.itemName);
      });
    });
  },
  watch: {
    $route: 'reInit',
  },
  methods: {
    callphone(row) {
      console.log(row);
      window.location.href = 'tel:' + row.tel;
    },
    itemShopClick(row) {
      this.$router.push(`/shop/detail?id=` + row.shopId + '&zuid=1');
    },
    refreshUserInfo() {},
    getChosedClass(class_value) {
      for (let i in this.classoptions) {
        if (class_value == this.classoptions[i].value) {
          return this.classoptions[i].text;
        }
      }
    },
    getChosedLevel(level_value) {
      for (let i in this.leveloptions) {
        if (level_value == this.leveloptions[i].value) {
          return this.leveloptions[i].text;
        }
      }
    },
    getChosedUnit(unit_value) {
      for (let i in this.unitoptions) {
        if (unit_value == this.unitoptions[i].value) {
          return this.unitoptions[i].text;
        }
      }
    },
    initClassOption() {
      dicItems({ groupId: this.classId })
        .then((res) => {
          let list = res.data.data.list;
          for (let i in list) {
            let opiton = {
              text: list[i].itemName,
              value: parseInt(list[i].itemValue),
            };
            this.classoptions.push(opiton);
          }
        })
        .catch(() => {});
    },
    initNewLevelOption() {
      dicItems({ groupId: this.newLevelId })
        .then((res) => {
          let list = res.data.data.list;
          for (let i in list) {
            let opiton = {
              text: list[i].itemName,
              value: parseInt(list[i].itemValue),
            };
            this.leveloptions.push(opiton);
          }
        })
        .catch(() => {});
    },
    initUnitOption() {
      dicItems({ groupId: this.unitId })
        .then((res) => {
          let list = res.data.data.list;
          for (let i in list) {
            let opiton = {
              text: list[i].itemName,
              value: parseInt(list[i].itemValue),
            };
            this.unitoptions.push(opiton);
          }
        })
        .catch(() => {});
    },
    init() {
      rentDetail({ rentId: this.rentId })
        .then((res) => {
          this.title = res.data.data.title;
          this.in_class = res.data.data.inClass;
          this.area_code = res.data.data.areaCode;
          this.address = this.getAddressByDistrictCode(res.data.data.areaCode);
          this.num = res.data.data.num;
          this.price = res.data.data.price;
          this.deposit = res.data.data.deposit;
          this.unit = res.data.data.unit;
          this.new_level = res.data.data.newLevel;
          this.is_pinkage = res.data.data.postage;
          this.detail = res.data.data.detail;
          this.images = res.data.data.images;
          this.tel = res.data.data.tel;
          if (res.data.data.failReason) {
            this.fail_reason = res.data.data.failReason.replace(/\n/g, '<br/>');
          }

          this.rent_userId = res.data.data.userId;
          this.status = res.data.data.status;
          if (typeof res.data.data.excessTime == 'undefined') {
            this.isOut = true;
          } else if (new Date() > new Date(res.data.data.excessTime)) {
            this.isOut = true;
          } else {
            this.isOut = false;
          }
          if (this.status !== 3) {
            this.isOut = true;
          }

          this.queryParam.rentId = this.rentId;
          this.queryParam.inClass = this.in_class;
          this.queryParam.areaCode = this.area_code || '';
          if (this.queryParam.areaCode != '') {
            this.queryParam.sort =
              'field(area_code, ' + this.queryParam.areaCode + ')';
            if (this.in_class != null && this.in_class != -1) {
              this.queryParam.sort +=
                ' desc,field(in_class, ' + this.in_class + ')';
            }
          } else {
            if (this.in_class != null && this.in_class != -1) {
              this.queryParam.sort = 'field(in_class, ' + this.in_class + ')';
            }
          }

          this.queryParam.order = 'desc';
          //查询detail完成后加载更多执行
          this.finished = false;
          let str = window.location.href,
            num = str.indexOf('#'); //取得整个地址栏
          this.link = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ]
          this.$wxShare({
            title: this.title,
            desc: this.detail,
            link: this.link,
            imgUrl: this.images != null ? this.images[0] : null,
          });
        })
        .then(() => {
          this.getParams();
        })
        .catch((e) => {});
    },
    reInit() {
      Object.assign(this.$data, this.$options.data.call(this));
      document.getElementById('content').scrollTop = 0;
      this.init();
    },
    getAddressByDistrictCode(district_code) {
      if (
        district_code == undefined ||
        district_code == null ||
        district_code == ''
      ) {
        return '地区未知';
      }
      let province_code = district_code.substring(0, 2) + '0000';
      let city_code = district_code.substring(0, 4) + '00';
      let province_name = areaList.province_list[province_code];
      let city_name = areaList.city_list[city_code];
      let district_name = areaList.county_list[district_code];
      return city_name;
    },
    itemClick(id) {
      this.$router.replace(`/info/rent-detail/${id}`);
    },
    getSrc(item) {
      let image = logo_default;
      if (item.images != null && item.images.length > 0) {
        image = item.images[0];
      }
      return image;
    },
    onLoad() {
      if (this.queryParam.page != 0 && this.list.length < 4) {
        this.queryParam.page = 0;
        this.list = [];
      }
      this.queryParam.page++;
      morelistRent(this.queryParam)
        .then((res) => {
          res.data.data.list.forEach((item) => {
            if (this.setou.get(String(item.userType))) {
              item.userType = this.setou.get(String(item.userType));
            }
          });
          this.list.push(...res.data.data.list);
          this.loading = false;
          this.finished = res.data.data.page >= res.data.data.pages;
        })
        .catch((e) => {
          this.queryParam.page--;
          this.loading = false;
          this.finished = true;
        });
    },
    showTel() {
      authInfo().then((res) => {
        // this.userId = res.data.data.userId;

        this.mobile = res.data.data.mobile || '';
        this.userStatus = res.data.data.status;
        this.isAttention = res.data.data.isAttention;
        this.directorId = res.data.data.directorId;
        this.userLevel = res.data.data.userLevel;
        this.memberLevel = res.data.data.memberLevel;
        this.powerPRSWLevle = res.data.data.powerPRSWLevle || 0;
        // 如果用户未注册，3秒后今日注册页面
        setTimeout(() => {
          if (this.userStatus == 0) {
            Toast('请先验证手机号!');
            this.$router.push(`/check`);
          }
        }, 1000);
      });
      let isAllowed = false;
      isAllowedShowTel({
        projectId: this.projectId,
      })
        .then((res) => {
          isAllowed = res.data.data || false;
        })
        .then(() => {
          if (isAllowed) {
            if (this.tel === undefined || this.tel === '') {
              this.telText = '联系方式已过期！';
              return;
            }
            this.telText = '联系电话：' + this.tel;
            this.refreshUserInfo();
          } else {
            Dialog.confirm({
              title: '系统提示',
              message:
                '每天一次免费查看信息动态 \n是否购买"涂装行业信息动态"月卡会员',
              confirmButtonText: '是',
              cancelButtonText: '否',
            })
              .then(() => {
                // on confirm
                if (this.userStatus === 0) {
                  Dialog.confirm({
                    title: '系统提示',
                    message: '请先登录',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                  })
                    .then(() => {
                      this.$router.push({ path: '/check' });
                    })
                    .catch(() => {});
                  return;
                }
                this.pay(2);
              })
              .catch(() => {
                // on cancel
              });
          }
        });
      return;
      //上架状态0：下架 1：审核中2：审核不通过 3：上架
      if (this.isOut) {
        this.telText = '商品已下架或者已售出！';
        return;
      }
      if (this.userStatus == 0) {
      } else {
        if (this.telText == '查看联系方式') {
          if (this.userLevel == 2 || this.memberLevel == 1) {
            if (this.tel === undefined || this.tel === '') {
              this.telText = '联系方式已过期！';
              return;
            }
            this.telText = '联系电话：' + this.tel;
          } else {
            //继续逻辑处理看看是不是三次之内的用户
            let isAllowed = false;
            isAllowedShowTel({ projectId: this.rentId })
              .then((res) => {
                isAllowed = res.data.data || false;
              })
              .then(() => {
                if (isAllowed) {
                  if (this.tel === undefined || this.tel === '') {
                    this.telText = '联系方式已过期！';
                    return;
                  }
                  this.telText = '联系电话：' + this.tel;
                  this.refreshUserInfo();
                } else {
                  Dialog.confirm({
                    title: '系统提示',
                    message:
                      '每天一次免费查看信息动态 \n是否购买"涂装行业信息动态"月卡会员',
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                  })
                    .then(() => {
                      // on confirm
                      if (this.userStatus == 0) {
                        Dialog.confirm({
                          title: '系统提示',
                          message: '请先登录',
                          confirmButtonText: '确定',
                          cancelButtonText: '取消',
                        })
                          .then(() => {
                            this.$router.push({ path: '/check' });
                          })
                          .catch(() => {});
                        return;
                      }
                      this.pay(2);
                    })
                    .catch(() => {
                      // on cancel
                    });
                }
              });
          }
        } else {
          if (this.tel === undefined || this.tel === '') {
            return;
          }
          this.call();
        }
      }
    },

    pay(type) {
      if (typeof WeixinJSBridge == 'undefined') {
        if (document.addEventListener) {
          document.addEventListener(
            'WeixinJSBridgeReady',
            onBridgeReady1,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady1);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady1);
        }
      } else {
        this.onBridgeReady1();
      }
    },
    onBridgeReady1() {
      getOrderSign({
        orderId: 1181174,
      }).then((res) => {
        let that = this;

        that.orderSn = res.data.data.orderSn;

        const Mfbank = JSON.parse(res.data.data.info.wcPayData);

        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: Mfbank.appId, //公众号名称，由商户传入
            timeStamp: Mfbank.timeStamp, //时间戳，自1970年以来的秒数
            nonceStr: Mfbank.nonceStr, //随机串
            package: Mfbank.package,
            signType: Mfbank.signType, //微信签名方式：
            paySign: Mfbank.paySign, //微信签名
          },
          function (res) {
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
              //跳转到开通会员接口
              setTenCardOnline({
                orderSn: that.orderSn,
                goodId: 1181174,
              }).then((res) => {
                let status = 0;
                if (res.data.errmsg == '成功') {
                  status = 1;
                }
                that.$router.push({
                  name: 'paymentVipStatus',
                  query: {
                    status: status,
                  },
                });
              });
            }
          }
        );
      });
    },

    call() {
      if (this.userLevel == 2) {
        window.location.href = 'tel:' + this.tel;
      } else {
        window.location.href = 'tel:' + this.director_phone;
      }
    },
    getParams() {
      // 取到路由带过来的参数
      this.qr_url =
        process.env.VUE_APP_BASE_API +
        'wechat/#/verify/user?shareId=' +
        getLocalStorage('userId').userId;
      cardInfo({
        userId: Number(getLocalStorage('userId').userId),
      }).then((res) => {
        this.avatar = res.data.data.avatar || '';
        this.qrcode = res.data.data.qrcode || '';
        if (res.data.data.userLevel == 2) {
          this.isManager = true;
        }
      });
    },
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Field.name]: Field,
    [Image.name]: Image,
    [List.name]: List,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Divider.name]: Divider,
    [Dialog.Component.name]: Dialog.Component,
    [vueQr.name]: vueQr,
  },
};
</script>
<style lang="scss" scoped>
/deep/ .van-cell:nth-child(7):after {
  border-bottom: 0;
}
/deep/ .van-field__label {
  width: auto;
}
.addrDetail {
  width: 100%;
  border-top: 1px solid #e8e8e8;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mendianlbel {
  width: 40%;
  text-align: center;
}
.detail_title {
  display: inline-block;
  min-width: 150px;
  font-size: 16px;
  line-height: 30px;
  border-bottom: 1px solid #ee3f00;
}
.useddetail /deep/ .van-field__control {
  margin: 10px 0;
  border: 1px solid #bbbbbb;
  -webkit-appearance: none;
}
.view-router {
  padding-bottom: 44px;
}

.more_recommend .van-divider {
  margin: 0px;
  padding-top: 15px;
}

.more_recommend .title {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.more_recommend .item {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  color: #969799;
  font-size: 12px;
  font-weight: normal;
  margin-top: -4px;
}

.more_recommend .van-cell {
  padding: 0px;
}

.more_recommend .cell-span {
  color: #969799;
  font-size: 12px;
}

/deep/ .van-button--default {
  border: 1px solid rgb(238, 63, 0);
}
.img-container {
  display: flex;
  justify-content: center;
  padding-bottom: 0.5rem;
  // transform: scale(.4) translateY(-50%);
  img {
    // height: 131.2px !important;
    margin: 0 auto;
    width: 90%;
  }
}
</style>
